<template>
  <div>
    <template v-if="form.zigbeeMac">
      <el-descriptions :column=columnCount size="medium" labelClassName="my-label" contentClassName="my-content">
        <el-descriptions-item label="网关名称">{{ form.name }}</el-descriptions-item>
        <el-descriptions-item label="网关MAC">{{ form.zigbeeMac }}</el-descriptions-item>
        <el-descriptions-item label="自动入网">
          <template v-if="form.zdrwbz==='Y'">
            <div class="myTagOpen" style="margin-bottom: 2px">是</div>
          </template>
          <template v-else>
            <div class="myTagClose">否</div>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="布防状态">
          <template v-if="form.defendStatus==='01'">
            <div class="myTagOpen">布防</div>
          </template>
          <template v-else>
            <div class="myTagClose">撤防</div>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="软件版本"> {{
            strInsert(form.softwareVersionNumber, 1, '.')
          }}
        </el-descriptions-item>
        <el-descriptions-item label="硬件版本">{{
            strInsert(form.hardwareVersionNumber, 1, '.')
          }}
        </el-descriptions-item>
        <el-descriptions-item label="wifiMac">{{ form.wifiMac }}</el-descriptions-item>
        <el-descriptions-item label="wifiIp">{{ form.wifiIp }}</el-descriptions-item>
        <el-descriptions-item label="远程IP">{{ form.remoteIp }}</el-descriptions-item>
        <el-descriptions-item label="远程地址">{{ form.address }}</el-descriptions-item>
        <!--        <el-descriptions-item label="修改时间">{{ form.modifyTime }}</el-descriptions-item>-->
        <el-descriptions-item label="创建时间">{{ form.createTime }}</el-descriptions-item>
        <el-descriptions-item label="上报时间">{{ form.switchTime }}</el-descriptions-item>
        <el-descriptions-item label="修改时间">{{ form.modifyTime }}</el-descriptions-item>
        <!--        <el-descriptions-item label="修改时间">{{ form.modifyTime }}</el-descriptions-item>-->

      </el-descriptions>
    </template>
    <template v-else>
      暂无网关
    </template>
  </div>

</template>


<script>
import {
  getGatewayByIdOrMac
} from '@/api/system/gateway'

export default {
  name: 'gatewayDetails',
  props: {
    row: {
      type: String,
      default: ''
    },
    columnCount: {
      type: Number,
      default: 2
    }
  }, watch: {
    row(value) {
      this.handleDetails(value)
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 部门名称
      deptName: undefined,
      // 部门树选项
      deptOptions: undefined,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 【请填写功能名称】表格数据
      groupList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        gatewayId: undefined,
        gatewayMac: undefined,
        homeId: undefined,
        name: undefined,
        type: undefined,
        code: undefined,
        action: undefined,
        modifyTime: undefined
      },
      // 表单参数
      form: {}
    }
  },
  created() {
    this.handleDetails(this.row)
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        gatewayId: undefined,
        gatewayMac: undefined,
        homeId: undefined,
        name: undefined,
        type: undefined,
        code: undefined,
        action: undefined,
        createTime: undefined,
        modifyTime: undefined
      }
      this.resetForm('form')
    },

    /** 查询网关详情 */
    handleDetails(row) {
      this.reset()
      if (!row || row === '') {
        return
      }
      // const id = row.id || this.ids
      getGatewayByIdOrMac({ gatewayMac: row }).then(response => {
        this.form = response.data
      })
    },

    /**
     * 数字字符串每隔几位插入一个分隔符
     * @param str
     * @param length
     * @param separator
     * @returns {*}
     */
    strInsert(str, length, separator) {
      if (str == null) {
        return ''
      }
      let reg = new RegExp('\\d{1,' + length + '}', 'g')
      let ma = str.match(reg)
      return ma.join(separator)
    }
  }
}
</script>

<style>

</style>
